<template>
    <el-button-group>
        <el-button type="warning" size="small" @click="bindAddMenu">添加菜单</el-button>
        <el-button type="warning" size="small" @click="bindRefrechMenu">刷新</el-button>
    </el-button-group>
    <el-row style="margin-top: 20px">
        <el-col :span="4">
            <el-tree :data="menuList" @node-click="handleNodeClick" default-expand-all :expand-on-click-node="false" />
        </el-col>
        <el-col :span="20">
            <el-table :data="subMenuList" border stripe>
                <el-table-column prop="id" label="序号" />
                <el-table-column prop="label" label="名称" />
                <el-table-column prop="path" label="路径" />
                <el-table-column prop="sort" label="排序" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="">编辑</el-button>
                        <el-button size="small" type="danger" @click="bindDeleteSubMenu(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!-- 添加菜单 -->
    <el-dialog title="添加菜单" v-model="disableAddMenuForm" width="50%">
        <AddMenuForm :parentId="parentId" @close="closeAddMenuForm"></AddMenuForm>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted, computed } from 'vue'
import { RequestMenu, RequestSubMenu } from '@/api/index'
import AddMenuForm from '@/components/AddMenuForm.vue'
interface Tree {
    id: number
    label: string
    children?: Tree[]
}
interface ISubMenu {
    id: number
    label: string
    path: string
    sort: number
}
const menuList: Ref<Tree[]> = ref([])
const subMenuList: Ref<ISubMenu[]> = ref([
    { id: 0, label: '', path: '', sort: 0 },
])
const disableAddMenuForm: Ref<boolean> = ref(false)
const parentId: Ref<number> = ref(0) //根菜单

onMounted(() => {
    getRootMenuList()
})
computed(() => {

})

// 根菜单列变
const getRootMenuList = async () => {
    const data = await RequestMenu(1)
    const { resultCode, resultInfo } = data

    if (resultCode === 1) {
        menuList.value = resultInfo
        getSubMenuList(resultInfo[0].id)
    }
}

/**
 * 子菜单列表
 * @param data
 */
const getSubMenuList = async (menuId: number) => {
    const data = await RequestSubMenu(menuId)
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        // console.log('resultInfo>>', resultInfo);
        subMenuList.value = resultInfo
    }
}

/**
 * 
 * @param data 删除子菜单
 */
const bindDeleteSubMenu = (data: any) => {
    console.log('scopedata>>', data.id);

}

/**
 * 树形菜单节点
 * @param data 
 */
const handleNodeClick = (data: Tree) => {
    parentId.value = data.id //菜单id
    console.log('data.id>>', data.id);
    getSubMenuList(data.id)
}

const bindAddMenu = () => {
    disableAddMenuForm.value = true
}
const closeAddMenuForm = () => {
    disableAddMenuForm.value = false
}

const bindRefrechMenu = () => {
    getRootMenuList()
}
</script>

<style scoped>

</style>
